<template>
  <div class="app-container">
    <el-card class="card">
      <el-container>
        <el-header>
          <el-row >
            <el-col :span="24" class="bill-detail-header">
              {{ billDetail.billDate }}电费账单详情
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" class="bill-detail-item">上期示数：{{ billDetail.lastUsage }}</el-col>
            <el-col :span="12" class="bill-detail-item">本期示数：{{ billDetail.nowUsage }}</el-col>
          </el-row>
        </el-header>

        <div class="spacer"></div>

        <el-container>
          <el-main>
            <el-table :data="tableData" style="width:100%">
              <el-table-column prop="level" label="档位"></el-table-column>
              <el-table-column prop="usage" label="用电量"></el-table-column>
              <el-table-column prop="amount" label="金额"></el-table-column>
              <el-table-column prop="money" label="计费档次"></el-table-column>
            </el-table>
            <el-row>
              <el-col :span="6" :push="18">
                <div style="height:5px;"></div>
                <el-button type="danger" @click="payMoney" v-show="isPaid == 0" >未支付</el-button>
                <el-button type="primary" v-show="isPaid == 1" >已支付</el-button> <!-- 支付宝已支付 -->
                <el-button type="success" v-show="isPaid == 2" >已支付</el-button> <!--  微信已支付 -->
              </el-col>
            </el-row>
          </el-main>
        </el-container>
      </el-container>
    </el-card>
  </div>
</template>

<script>
import { getBillDetail, getPay, getBillList } from "@/api/system/bill";
import { getUserProfile } from "@/api/system/user";


export default {
  name: "billsDetail",
  data() {
    return {
      // 当前账单支付状态
      isPaid: -1, // 0:未支付,1:已支付(支付宝),2:已支付(微信)
      tableData: [
        { level: '第一档', amount: 0, usage: 0 ,money:'0.56元/度'},
        { level: '第二档', amount: 0, usage: 0 ,money:'0.61元/度'},
        { level: '第三档', amount: 0, usage: 0 ,money:'0.86元/度'},
        { level: '合计', amount: 0, usage: 0 }],
      payHtml: null,
      showDayChart: true,
      showMonChart: false,
      // 每日用电情况表格数据
      list: [],
      dayElecInfoList: [],
      dayElec: [],
      //每月用电情况表格数据
      monthElecInfoList: [],
      monthElec: [],
      monthElecYear: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        eUsage: null,
        eTime: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      //账单表格
      paymentList: [],
      billDetail: [],
      month: [],
      // 账单状态
      ispaid: false,
      //用户id
      userId: null,
      //第一档用电量
      firstUsage: 0,
      //第二档用电量
      secondUsage: 0,
      //第三档用电量
      thirdUsage: 0,
      //用电量
      Usage: 0,
      //第一档金额
      firstAmount: 0,
      //第二档金额
      secondAmount: 0,
      //第三档金额
      thirdAmount: 0,
      //总金额
      totalAmount: 0,
      //账单详情id
      billInfoId: null,
    };
  },
  mounted() {
    this.getList();

  },
  methods: {
    getList() {
      getUserProfile().then(response => {
        if (this.$route.params.userId) {
          this.userId = this.$route.params.userId;
        } else {
          this.userId = response.data.userId;
        }
        // 获取账单详情
        if (this.$route.query.id) {
          this.billInfoId = this.$route.query.id;
          this.getBillDetailMethod();

        } else {
          getBillList(this.userId).then(response => {
            console.log(response);
            const lt = response.length - 1
            this.billInfoId = response[lt].billInfoId;
            this.getBillDetailMethod();
          })
        }
      })
    },
    getPaymethod(val) {
      if (val == 0) {
        this.billDetail.payMethod = "未支付";
      } else {
        this.billDetail.payMethod = "支付宝";
      }
    },
    //获取账单详情
    getBillDetailMethod() {
      this.loading = true;

      getBillDetail(this.billInfoId).then(response => {
        this.billDetail = response;
        this.billDetail.billDate = response.billDate.match(/^(\d{4}-\d{2})/)[0]; // 匹配'-'后跟随两个数字再跟随'-'的部分
        this.isPaid = response.payMethod // 当前账单支付状态
        // this.paymentList = [this.billDetail];
        // this.getPaymethod(response.payMethod);

        this.loading = false;
        this.getUsageAmount(this.billDetail.lastUsage, this.billDetail.nowUsage);

        this.tableData = [
          { level: '第一档', amount: this.firstAmount, usage: this.firstUsage ,money:'0.56元/度'},
          { level: '第二档', amount: this.secondAmount, usage: this.secondUsage ,money:'0.61元/度'},
          { level: '第三档', amount: this.thirdAmount, usage: this.thirdUsage ,money:'0.86元/度'},
          { level: '合计', amount: this.totalAmount, usage: this.Usage}
        ];
      });
    },
    //计算电量
    getUsageAmount(lastval, nowval) {
      this.Usage = nowval - lastval;
      if (this.Usage > 260) {
        this.thirdUsage = this.Usage - 260;
        this.firstUsage = 180;
        this.secondUsage = 80;
      } else if (this.Usage > 180) {
        this.secondUsage = this.Usage - 180;
        this.firstUsage = 180;
      } else {
        this.firstUsage = this.Usage;
      }
      //计算金额
      this.firstAmount = (this.firstUsage * 0.56).toFixed(2);
      this.secondAmount = (this.secondUsage * 0.61).toFixed(2);
      this.thirdAmount = (this.thirdUsage * 0.86).toFixed(2);
      this.totalAmount = (parseFloat(this.firstAmount) + parseFloat(this.secondAmount) + parseFloat(this.thirdAmount)).toFixed(2);
    },
    payMoney() {
      //获取支付页面
      getPay(this.billInfoId).then((response) => {
        window.open(response);
        // this.payHtml = response;
        // console.log(response);
      })
    }
  },

}
</script>
<style scoped>
.app-container {
  font-size: larger;
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  height: 80vh;

}
.card {
  width: 80%;
  /* 示例宽度 */
  height: 65%;
  /* 示例高度 */
  border: 1px solid #ccc;
  padding: 20px;
  box-sizing: border-box;
  /* 确保padding不影响宽度 */
}
.bill-detail-header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 20px;
  color: #333;
}
.bill-detail-item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #666;
}
.spacer {
  height: 20px; /* 你想要的间隔高度 */
}

</style>
